<template>
    <view class="block-info">
        <u-row customStyle="margin-bottom: 40rpx" :gutter="20">
            <u-col span="6">
                <u-text
                        text="合约地址"
                        size="24rpx"
                        color="#B6B6B6"
                ></u-text>
                <view class="input">
                    <text>{{ getSpliceText(nft.contractAddr) }}</text>
                    <text @click="copy(nft.contractAddr)">复制</text>
                </view>
            </u-col>
            <u-col span="6">
                <u--text
                        text="认证标识"
                        size="24rpx"
                        color="#B6B6B6"
                ></u--text>
                <view class="input">
                    <text>{{ nft.tokenId }}</text>
                    <text @click="copy(nft.tokenId)">复制</text>
                </view>
            </u-col>
        </u-row>
        <u-row :gutter="20">
            <u-col span="6">
                <u-text
                        text="认证标准"
                        size="24rpx"
                        color="#B6B6B6"
                ></u-text>
                <view class="text-info">
                    <block v-if="nft.type === 'e721'">
                        ERC721
                    </block>
                    <block v-if="nft.type === 'e1155'">
                        ERC1155
                    </block>
                </view>
            </u-col>
            <u-col span="6">
                <u-text
                        text="认证网络"
                        size="24rpx"
                        color="#B6B6B6"
                ></u-text>
                <view class="text-info">
                    Polygon
                </view>
            </u-col>
        </u-row>
        <u-toast ref="uToast"></u-toast>
    </view>
</template>

<script>
    export default {
        name: "index",
        props: {
            nft: {
                type: Object,
                default: () => {}
            }
        },
        methods: {
            getSpliceText(str) {
                if (!str) {
                    return str
                }
                var sub1 = str.slice(0, 8)
                var sub2 = str.slice(-6)
                return sub1 + '...' +sub2
            },
            copy(text) {
                uni.setClipboardData({
                    data: text + '',
                    success: function () {
                        this.$refs.uToast.show({
                            type: 'default',
                            message: "复制成功"
                        })
                    },
                    fail: function() {
                        console.log('复制失败')
                    }
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .block-info {
        padding: 0 26rpx;
        .input {
            background-color: #2E2F30;
            height: 68rpx;
            padding: 0 18rpx;
            line-height: 68rpx;
            margin-top: 20rpx;
            display: flex;
            align-content: center;
            justify-content: space-between;
            text {
                font-size: 24rpx;
                &:nth-child(1) {
                    color: #999999;
                }
                &:nth-child(2) {
                    color: #FFFFFF;
                }
            }
        }
        .text-info {
            background-color: #2E2F30;
            height: 68rpx;
            padding: 0 18rpx;
            line-height: 68rpx;
            margin-top: 20rpx;
            font-size: 24rpx;
            color: #FFFFFF;
        }
    }
</style>
